<!-- -->
<template>
  <div>
    <a-button class="editable-add-btn" @click="handleAdd">Add</a-button>

    <a-table bordered :dataSource="dataSource" :columns="columns">
     <!--
      <template slot="name" slot-scope="text, record">
        <editable-cell :text="text" @change="onCellChange(record.key, 'name', $event)"/>
      </template>
    -->
      <template slot="operation" slot-scope="text, record">
        <a-popconfirm
          v-if="dataSource.length"
          title="Sure to delete?"
          @confirm="() => onDelete(record.key)"
        >
          <a href="javascript:;">Delete</a>
        </a-popconfirm>

        <a-popconfirm
          v-if="dataSource.length"
          title="Update Window!"
          @confirm="() => onUpdate(record)"
        >
          <a href="javascript:;">Update</a>
        </a-popconfirm>
      </template>
    </a-table>
  </div>
</template>

<script>
import {EditableCell} from 'ant-design-vue/lib'
export default {
  name: "User",
  data() {
    return {
      count:2,
      columns: [
        {
          title: "ID",
          dataIndex: "key"
        },
        {
          title: "name",
          dataIndex: "name",
          width: "30%" //,
          //scopedSlots: { customRender: 'name' },
        },
        {
          title: "age",
          dataIndex: "age"
        },
        {
          title: "address",
          dataIndex: "address"
        },
        {
          title: "operation",
          dataIndex: "operation",
          scopedSlots: { customRender: "operation" }
        }
      ],
      dataSource: [
        {
          key: "0",
          name: "Edward King 0",
          age: "32",
          address: "London, Park Lane no. 0"
        },
        {
          key: "1",
          name: "Edward King 1",
          age: "32",
          address: "London, Park Lane no. 1"
        }
      ],

      msg: "我的用户模块"
    };
  },

  components: {
      EditableCell
  },

  filters: {},

  computed: {},

  methods: {
    onDelete(key) {
      const dataSource = [...this.dataSource];//数据解构
     // ajax delete key    ->
      this.dataSource = dataSource.filter(item => item.key !== key);// rest
     //ajax get findPage
    },
    handleAdd() {
        //alert form
        //form sumbit 
         //ajax post form data
         // rest
         // ajax get findPage
      const { count, dataSource } = this;
      const newData = {
        key: count,
        name: `Edward King ${count}`,
        age: 32,
        address: `London, Park Lane no. ${count}`
      };
      this.dataSource = [...dataSource, newData];
      this.count = count + 1;
    }
  }
};
</script>
<style scoped>
</style>